import React, { useState, useImperativeHandle, useEffect } from 'react';
import { Collapse, Table, Tooltip, Icon, Tag } from 'antd';
import { connect } from 'react-redux';
import { compare } from 'src/utils/compare';

const Panel = Collapse.Panel;

function PrepositionFrom(props) {
  const { variables, return_variables, returnResults } = props;
  const [returnResultsList, setReturnResultsList] = useState([]);
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  useEffect(() => {
    let newArr = [];
    let obj = {};
    for (var i = 0; i < returnResults.length; i++) {
      if (!obj[returnResults[i].category]) {
        newArr.push({ ...returnResults[i], dataBase: [] });
        obj[returnResults[i].category] = true;
      }
    }
    // 拼装数值
    returnResults.map((it) => {
      let value = '';
      variables.forEach((item) => {
        if (it.code === (item.code.includes('.') ? item.code : `${item.datasource}.${item.code}`)) {
          it.value = item.value;
        }
      });
      return { ...it };
    });
    var a = newArr.map((it) => {
      let dataBase = [];
      returnResults.forEach((item) => {
        if (item.category === it.category) {
          dataBase = [...dataBase, item];
        }
      });
      return { ...it, dataBase };
    });
    setReturnResultsList(a);
  }, [returnResults]);
  useEffect(() => {
    var returnVariables = return_variables.map((it) => it.code);
    setSelectedRowKeys(returnVariables);
  }, [return_variables]);
  const colums = [
    {
      title: '序号',
      key: 'index',
      width: 80,
      align: 'center',
      render: (text, record, index) => {
        return <span>{index + 1}</span>;
      },
    },
    {
      title: '名称',
      dataIndex: 'name',
      key: 'name',
      render: (text, record) => {
        return (
          <Tooltip title={text}>
            <span style={compare({ ...props, value: record, compareData: record.compareData }, 'code')}>{text}</span>
          </Tooltip>
        );
      },
    },
    {
      title: '变量CODE',
      dataIndex: 'code',
      key: 'code',
      render: (text, record) => {
        return (
          <Tooltip title={text}>
            <span style={compare({ ...props, value: record, compareData: record.compareData }, 'code')}>{text}</span>
          </Tooltip>
        );
      },
    },
    {
      title: '数据类型',
      dataIndex: 'dataType',
      key: 'dataType',
      render: (text, record) => {
        return (
          <Tooltip title={text}>
            <span style={compare({ ...props, value: record, compareData: record.compareData }, 'code')}>{text}</span>
          </Tooltip>
        );
      },
    },
    {
      title: '数值',
      dataIndex: 'value',
      key: 'value',
      render: (text, record) => {
        return (
          <Tooltip title={text}>
            <span style={compare({ ...props, value: record, compareData: record.compareData }, 'code')}>{text}</span>
          </Tooltip>
        );
      },
    },
    {
      title: '是否返回业务系统',
      dataIndex: '',
      key: '',
      render: (text, record) => {
        return <div>{selectedRowKeys.includes(record.code) ? <Tag color='#108ee9'>是</Tag> : <Tag>否</Tag>}</div>;
      },
    },
  ].filter(Boolean);

  return (
    <Collapse expandIcon={({ isActive }) => (isActive ? <Icon type='minus' /> : <Icon type='plus' />)}>
      {returnResultsList.map((it) => {
        return (
          <Panel header={it.categoryName} key={it.key}>
            <>
              {it.dataBase.length > 0 && (
                <Table
                  rowKey={'code'}
                  className='fixed'
                  dataSource={it.dataBase}
                  columns={colums}
                  pagination={false}
                  style={{ marginBottom: 20 }}
                />
              )}
            </>
          </Panel>
        );
      })}
    </Collapse>
  );
}

function mapStateToProps(state) {
  return {
    fieldClassification: state.code.field_classification || [],
  };
}

export default connect(mapStateToProps)(PrepositionFrom);
